<div class="panel panel-default page-panel home-page">

  <div class="panel-heading clearfix">

    <div class="panel-title ">
      <div class="pull-left">
        <button type="button" class="navbar-toggle collapsed"
                ng-if="activeConfigStatus.executionMode != pipelineConstant.SLAVE"
                ng-class="{'selected' : !hideLibraryPanel}"
                ng-click="toggleLibraryPanel()"
                title="{{'home.header.toggleLibraryPane' | translate}}">
          <i class="icon-bar"></i>
          <i class="icon-bar"></i>
          <i class="icon-bar"></i>
        </button>
      </div>
      <h3 class="pull-left" translate="home.title">Pipelines</h3>
    </div>

    <div class="pull-right btn-group list-grid-toggle-toolbar">
      <label class="btn btn-default btn-sm"
             tooltip-placement="bottom"
             tooltip="{{'global.form.listView' | translate}}"
             tooltip-popup-delay="500"
             ng-model="header.pipelineGridView"
             btn-radio="false"><span class="glyphicon glyphicon-th-list"></span></label>
      <label class="btn btn-default btn-sm"
             tooltip-placement="bottom"
             tooltip="{{'global.form.gridView' | translate}}"
             tooltip-popup-delay="500"
             ng-model="header.pipelineGridView"
             btn-radio="true"><span class="glyphicon glyphicon-th"></span></label>
    </div>

    <div class="pull-right" ng-if="selectedPipelineLabel !== 'system:samplePipelines'">

      <div class="btn-group" dropdown
           ng-if="isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])"
           ng-hide="previewMode || snapshotMode">
       <span class="btn btn-link dropdown-toggle icon-button" dropdown-toggle aria-expanded="true"
             tooltip-placement="bottom" tooltip="{{'home.header.more' | translate}}"
             tooltip-trigger="{{iconOnly ? 'mouseenter' : 'notooltip'}}"
             tooltip-popup-delay="500"
             ng-click="$event.stopPropagation();">
          <i class="fa fa-ellipsis-h fa-14x"></i>
        </span>
        <ul class="dropdown-menu pull-right" role="menu">

          <li role="presentation"
              ng-class="{'disabled': selectedPipelineList.length === 0}"
              ng-if="isAuthorized([userRoles.admin, userRoles.manager])">
            <a href="#" dropdown-toggle
               ng-click="selectedPipelineList.length === 0 || resetOffsetForSelectedPipelines()">
              <i class="fa fa-power-off"></i>
              <span>{{'home.resetOffset.title' | translate}}</span>
            </a>
          </li>

          <li role="presentation"
              ng-class="{'disabled': selectedPipelineList.length === 0}"
              ng-if="isAuthorized([userRoles.admin, userRoles.creator])">
            <a href="#" dropdown-toggle
               ng-click="selectedPipelineList.length === 0 || addLabelsToSelectedPipelines()">
              <i class="fa fa-tags"></i>
              <span>{{'home.header.addLabels' | translate}}</span>
            </a>
          </li>

          <li role="presentation"
              ng-class="{'disabled': selectedPipelineList.length === 0}"
              ng-if="isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])">
            <a href="#" dropdown-toggle
               ng-click="selectedPipelineList.length === 0 || exportSelectedPipelines(false, false)">
              <i class="glyphicon glyphicon-export"></i>
              <span>{{'global.form.export' | translate}}</span>
            </a>
          </li>

          <li role="presentation"
              ng-class="{'disabled': selectedPipelineList.length === 0}"
              ng-if="isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])">
            <a href="#" dropdown-toggle
               ng-click="selectedPipelineList.length === 0 || exportSelectedPipelines(true, false)">
              <i class="glyphicon glyphicon-export"></i>
              <span>{{'global.form.exportWithLibraryDefinitions' | translate}}</span>
            </a>
          </li>

          <li role="presentation"
              ng-class="{'disabled': selectedPipelineList.length === 0}"
              ng-if="isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])">
            <a href="#" dropdown-toggle
               ng-click="selectedPipelineList.length === 0 || exportSelectedPipelines(true, true)">
              <i class="glyphicon glyphicon-export"></i>
              <span>{{'global.form.exportWithPlainTextCredentials' | translate}}</span>
            </a>
          </li>

          <li role="presentation"
              ng-class="{'disabled': selectedPipelineList.length === 0}"
              ng-if="isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])">
            <a href="#" dropdown-toggle
               ng-click="selectedPipelineList.length === 0 || publishPipelinesToEdge(true)">
              <i class="fa fa-upload"></i>
              <span>{{'global.form.publishPipelinesToEdge' | translate}}</span>
            </a>
          </li>


          <li role="presentation">
            <a href="#" dropdown-toggle
               ng-click="onToggleShowNameColumn()">
              <i class="glyphicon glyphicon-record"></i>
              <span>{{(header.showNameColumn ? 'global.form.hideNameColumn' : 'global.form.showNameColumn') | translate}}</span>
            </a>
          </li>

        </ul>
      </div>

      <a class="btn btn-link icon-button"
         tooltip-placement="bottom"
         tooltip="{{'global.form.refresh' | translate}}"
         tooltip-popup-delay="500"
         ng-click="refreshPipelines()">
        <span class="fa fa-refresh fa-14x"></span>
      </a>

      <a class="btn btn-link icon-button"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && common.isDPMEnabled"
         ng-disabled="selectedPipelineList.length === 0"
         ng-click="selectedPipelineList.length === 0 || publishSelectedPipelines()"
         tooltip-placement="bottom"
         tooltip="{{('global.form.publish' | translate)  + ' (' + selectedPipelineList.length + ')'}}"
         tooltip-popup-delay="500">
        <i class="fa fa-cloud-upload fa-14x"></i>
      </a>

      <a class="btn btn-link icon-button"
         ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && !common.isSlaveNode"
         ng-disabled="selectedPipelineList.length === 0"
         ng-click="selectedPipelineList.length === 0 || deleteSelectedPipeline()"
         tooltip-placement="bottom"
         tooltip="{{('global.form.delete' | translate) + ' (' + selectedPipelineList.length + ')'}}"
         tooltip-popup-delay="500">
        <i class="fa fa-trash-o fa-14x"></i>
      </a>

      <a ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && !common.isSlaveNode"
         ng-disabled="selectedPipelineList.length !== 1 || common.isSlaveNode"
         ng-click="selectedPipelineList.length !== 1 || duplicatePipelines()"
         tooltip-placement="bottom"
         tooltip="{{'global.form.duplicate' | translate}}"
         tooltip-popup-delay="500"
         class="btn btn-link icon-button">
        <i class="fa fa-files-o fa-14x"></i>
      </a>

      <a ng-disabled="selectedPipelineList.length !== 1 || common.isSlaveNode"
         ng-if="(common.authenticationType !== 'none' || common.isDPMEnabled) && !common.isSlaveNode"
         ng-click="selectedPipelineList.length !== 1 || shareSelectedPipelineConfig()"
         tooltip-placement="bottom"
         tooltip="{{'global.form.share' | translate}}"
         tooltip-popup-delay="500"
         class="btn btn-link icon-button">
        <i class="fa fa-share-alt fa-14x"></i>
      </a>

      <a ng-if="isAuthorized([userRoles.admin, userRoles.manager])"
         ng-disabled="selectedPipelineList.length === 0 || common.isSlaveNode"
         ng-click="selectedPipelineList.length === 0 || startSelectedPipelines()"
         tooltip-placement="bottom"
         tooltip="{{('home.header.start' | translate)  + ' (' + selectedPipelineList.length + ')'}}"
         tooltip-popup-delay="500"
         class="btn btn-link icon-button">
        <i class="glyphicon glyphicon-play fa-14x"></i>
      </a>

      <a ng-if="isAuthorized([userRoles.admin, userRoles.manager])"
         ng-disabled="selectedPipelineList.length === 0 || common.isSlaveNode"
         ng-click="selectedPipelineList.length === 0 || stopSelectedPipelines()"
         tooltip-placement="bottom"
         tooltip="{{('home.header.stop' | translate)  + ' (' + selectedPipelineList.length + ')'}}"
         tooltip-popup-delay="500"
         class="btn btn-link icon-button">
        <i class="glyphicon glyphicon-stop fa-14x"></i>
      </a>

    </div>

    <div class="pull-right" ng-show="header.pipelineGridView">

      <span class="sort-by-label">Sort by:</span>
      <div class="btn-group pull-right sort-by-dropdown">

        <button class="btn btn-link dropdown-toggle icon-button" type="button" data-toggle="dropdown">
          <span>{{'home.sortColumn.' + header.sortColumn | translate}}</span>
          <i ng-show="!header.sortReverse" class="fa fa-arrow-down"></i>
          <i ng-show="header.sortReverse" class="fa fa-arrow-up"></i>
        </button>

        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="header.sortColumn = 'NAME'; header.sortReverse = false; updateFilteredPipelines(0)">
              <span translate="home.sortColumn.NAME">Name</span>
              <i class="fa fa-arrow-down"></i>
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="header.sortColumn = 'NAME'; header.sortReverse = true; updateFilteredPipelines(0)">
              <span translate="home.sortColumn.NAME">Name</span>
              <i class="fa fa-arrow-up"></i>
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="header.sortColumn = 'CREATED'; header.sortReverse = false; updateFilteredPipelines(0)">
              <span translate="home.sortColumn.CREATED">Date created</span>
              <i class="fa fa-arrow-down"></i>
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="header.sortColumn = 'CREATED'; header.sortReverse = true; updateFilteredPipelines(0)">
              <span translate="home.sortColumn.CREATED">Date created</span>
              <i class="fa fa-arrow-up"></i>
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="header.sortColumn = 'LAST_MODIFIED'; header.sortReverse = false; updateFilteredPipelines(0)">
              <span translate="home.sortColumn.LAST_MODIFIED">Date updated</span>
              <i class="fa fa-arrow-down"></i>
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="header.sortColumn = 'LAST_MODIFIED'; header.sortReverse = true; updateFilteredPipelines(0)">
              <span translate="home.sortColumn.LAST_MODIFIED">Date updated</span>
              <i class="fa fa-arrow-up"></i>
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="header.sortColumn = 'STATUS'; header.sortReverse = false; updateFilteredPipelines(0)">
              <span translate="home.sortColumn.STATUS">Status</span>
              <i class="fa fa-arrow-down"></i>
            </a>
          </li>

          <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#"
               ng-click="header.sortColumn = 'STATUS'; header.sortReverse = true; updateFilteredPipelines(0)">
              <span translate="home.sortColumn.STATUS">Status</span>
              <i class="fa fa-arrow-up"></i>
            </a>
          </li>

        </ul>
      </div>
    </div>

    <div class="pull-right">
      <div class="btn-group pipeline-search" >
        <form ng-submit="updateFilteredPipelines(0)">
          <input type="search" class="form-control" placeholder="Filter Pipelines"
                 ng-model="header.searchInput">
        </form>
      <span class="glyphicon glyphicon-remove-circle search-clear"
            ng-click="header.searchInput = '';updateFilteredPipelines(0);"></span>
      </div>
    </div>

    <div class="pull-right pipelines-count">
      <span ng-if="filteredPipelines.length >= totalCount">{{totalCount}} {{totalCount > 1 ? 'Pipelines' : 'Pipeline'}}</span>
      <span ng-if="filteredPipelines.length < totalCount">{{filteredPipelines.length}} of {{totalCount}} {{totalCount > 1 ? 'Pipelines' : 'Pipeline'}}</span>
    </div>

  </div>

</div>
